<template>
  <el-dialog
    title="评论详情"
    :model-value="visible"
    @close="handleClose"
    width="600px"
  >
    <div class="comment-detail">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="评论ID">
          {{ comment.id }}
        </el-descriptions-item>
        <el-descriptions-item label="评论内容">
          <div class="content-text">{{ comment.content }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="用户ID">
          {{ comment.userId }}
        </el-descriptions-item>
        <el-descriptions-item label="文章ID">
          {{ comment.articleId }}
        </el-descriptions-item>
        <el-descriptions-item label="父评论ID">
          <span v-if="comment.parentId">{{ comment.parentId }}</span>
          <el-tag v-else type="info" size="small">顶级评论</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ formatDateTime(comment.createTime) }}
        </el-descriptions-item>
      </el-descriptions>
      
      <!-- 子评论列表 -->
      <div v-if="childComments.length > 0" class="child-comments">
        <h4>子评论列表</h4>
        <el-table :data="childComments" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="content" label="内容" min-width="200" show-overflow-tooltip />
          <el-table-column prop="userId" label="用户ID" width="100" />
          <el-table-column prop="createTime" label="创建时间" width="180">
            <template #default="{ row }">
              {{ formatDateTime(row.createTime) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getCommentsByArticle } from '@/api/comment'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  comment: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:visible'])

const childComments = ref([])

// 监听评论变化，获取子评论
watch(() => props.comment, async (newVal) => {
  if (newVal && newVal.id) {
    await fetchChildComments(newVal.id)
  }
}, { immediate: true })

// 获取子评论
const fetchChildComments = async (parentId) => {
  try {
    // 这里需要根据实际API调整
    // 暂时使用文章评论接口，实际应该使用根据父评论ID查询的接口
    const result = await getCommentsByArticle(props.comment.articleId)
    if (result.code === 200) {
      childComments.value = result.data.filter(item => item.parentId === parentId)
    }
  } catch (error) {
    console.error('获取子评论失败:', error)
  }
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  return new Date(dateTime).toLocaleString('zh-CN')
}
</script>

<style lang="scss" scoped>
.comment-detail {
  .content-text {
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.5;
  }
  
  .child-comments {
    margin-top: 20px;
    
    h4 {
      margin-bottom: 15px;
      color: #303133;
    }
  }
}
</style>
